<template>
  <view class="dmbox" :style="{'height': boxheight + 'px', 'background-image': 'url(' + background + ')'}">
    <view v-for="(item, index) in playerlist" :key="index" class="dmlist">
      <view class="td">
        <view class="avaurl" :style="{'background-image': 'url(' + item.avaurl + ')'}">
          <view class="gender female" v-if="item.sex === 'female'">♀</view>
          <view class="gender male" v-else>♂</view>
        </view>
        <view class="pa">
          <view class="nickname">
            <text style="font-size: 14px;">{{ item.nickname }}</text>
          </view>
          <span class="golddm" v-if="item.title">{{ item.title }}</span>
        </view>
      </view>
      <view class="td1">
        <text>{{ item.desc }}</text>
      </view>
      <view class="td3">
        <!-- <view class="rank" :style="{color: ((index < 3 && page == 1) ? '#f8e400' : '#ddd')}">{{ (index + 1) | rank(page, limit) }}</view> -->
        <text class="cnt">{{ item.cnt }}</text>
      </view>
    </view>
    <view class="pages">{{ page }}/{{ totalpage }}</view>
  </view>
</template>

<script>
  // import dmdialog from '@/components/dmDialog'
  export default {
    // components: {
    //     dmdialog
    // },
    props: {
      shopid: 0,
      pptv: 0
    },
    data() {
      return {
        rankname: '',
        playerlist: {},
        page: 1,
        limit: 7,
        totalpage: 0,
        dms: 0,
        boxheight: 370,
        pptvv: 0,
        background: ''
      }
    },
    filters: {
      rank(n, p, l) {
        return (p - 1) * l + n
      }
    },
    mounted() {
      this.setboxheight()
      this.getPlayerList()
    },
    destroyed() {
      clearTimeout(this.timer)
    },
    methods: {
      setboxheight() {
        this.pptvv = this.pptv

        // eslint-disable-next-line eqeqeq
        if (this.pptvv == 1) {
          this.boxheight = 530
        } else {
          this.boxheight = 370
        }
      },
      getPlayerList() {
        this.$http({
          url: `/bigscreen/talent_player`,
          data: {
            pptv: this.pptv,
            shop: this.shopid,
            page: this.page
          },
          method: 'post'
        }).then(response => {
          this.rankname = response.rankname
          this.playerlist = response.list
          this.limit = response.size
          this.totalpage = response.totalpage
          this.background = response.background
        }).catch(error => {
          console.log(error)
        })
      },
      timer() {
        return setTimeout(() => {
          this.page++
          if (this.page > this.totalpage) {
            this.page = 1
          }
          this.getPlayerList()
        }, 10000)
      }
    },
    watch: {
        pptv(newVal,oldVal) {
            this.setboxheight()
        }
    },
  }
</script>

<style lang="less">
.dmbox {
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    height: 370px;
    position: relative;
    .dmlistth{
        width: 100%;
        height: 50px;

        display: flex;
        justify-content: space-between;
        background-color: rgba(23,53,73,.5);

        .th{
          flex:1;
          text-align: center;
          height: 50px;
          line-height: 50px;
        }
        .th1{
          flex:1;
          text-align: center;
          height: 50px;
          line-height: 50px;
        }
    }
   .dmlist{
        width: 100%;
        border-bottom:1px solid #444;
        display: flex;
        justify-content: space-between;
        .td{
            flex:1;
            height: 57px;
            padding: 3px 0 3px 8px;
            display:flex;
            justify-content: flex-start;
            align-items:center;
            .avaurl{
                width: 40px;
                height: 40px;
                background-position: center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-color: #000;
                position: relative;
                .xingji{
                  position: absolute;
                  width: 100%;
                  top:-14px;
                  left: 0;
                  display: flex;
                  justify-content: center;
                  .star{
                    color: #eebf2f;
                    font-size: 14px;
                    text-shadow: 0 0 2px #000;
                  }
                }
                .gender{
                    font-weight:bolder;
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                    font-size: 12px;
                    text-align: center;
                    background: #ddd;
                    border-radius: 50%;
                    right: 0;
                    bottom: 0;
                }
                .male{
                  color:#5dcdFA;
                }
                .female{
                  color:#ff29c0;
                }
            }
            .pa{
               margin-left: 4px;
              .golddm{
                background-color:#eebf2f;
                background-image: linear-gradient(to right,#eebf2f, #feb,#eebf2f);
                color:#000;
                padding:2px 4px;
                font-size:12px;
                border-radius:4px;
                white-space: nowrap;
              }
            }
        }
        .td1{
          flex: 2;
          height: 57px;
          display:flex;
          justify-content: flex-start;
          align-items:center;
          view{
            width: 100%;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2;//限制文本的行数，只显示两行
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
        .td2{
          flex: 1;
          height: 46px;
          line-height: 46px;
          display:flex;
          justify-content: center;
          align-items:center;
          font-size: 14px;
        }
        .td3{
            height: 57px;
            width: 57px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .cnt{
                text-align: center;
                line-height: 57px;
                font-size: 12px;
            }
            .rank{
                padding-right: 10px;
                line-height: 50px;
                text-align: center;
                font-size: 22px;
                font-style: italic;
                font-weight: bold;
            }
        }
    }
    .dmlist:hover{
        background: rgba(255, 255, 255, 0.1);
    }
    .pages{
        position: absolute;
        right: 3px;
        bottom: 3px;;
        background: rgba(255,255,255,.5);
        color: #000;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
    }
}
</style>